<%-- 
    Document   : enterClassWorkGrades
    Created on : Nov 16, 2013, 1:03:06 PM
    Author     : Mershack
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="../../assets/ico/favicon.png">
        <title>GRS Enter Grades</title>
        <!-- Bootstrap core CSS -->
        <link href="../libs/bootstrap/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <header>  
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header"><p class="navbar-text navbar-left">Grade Report System</p></div>
                <form class="navbar-form navbar-right" method="post" action="../login" >
                    <div class="form-group">Signed in as ${sessionScope.UserName}</div>
                    <button id="logout" name="logout" type="submit" class="btn btn-link">(Log out)</button>
                </form>
            </nav>    
        </header>
        <div class="container">
            <div id="successMessageContainer" class="alert alert-success" style="display: none;">
                <a class="close" data-dismiss="alert" href="#">×</a><span id="successMessage">${messages.success}</span>
            </div>
            <div id="errorMessageContainer" class="alert alert-danger" style="display: none;">
                <a class="close" data-dismiss="alert" href="#">×</a><span id="errorMessage">${messages.error}</span>
            </div>
            <form class="" method="post" action="enterClassWorkGrades" >
                <p class="navbar-text navbar-right">
                    <button type="submit" name="backToClassWorks" id="backToClassWorks" class="btn btn-default btn-lg">
                        <input type="hidden" name="sectionId" id="sectionId" value="${section.getSectionID()}">
                        <span class="glyphicon glyphicon-circle-arrow-left"></span> Back to class works
                    </button>
                </p>
                <h2>Enter Grades - ${classWork.getName()}</h2>
                <p class="lead">Enter grades for this classwork (Max points: ${classWork.getMaxPoints()}).</p>
            </form>
            <div class="list-group">
                <h4 class="list-group-item-heading">(${section.getSectionName()}) <span class="text-info"> ${section.getCourse().getCourseCode()} - ${section.getCourse().getCourseName()}</span></h4>
            </div>
            <!--
             <input id ="editModeButton" type="button" value="De-activate Edit Mode" onclick="editMode(this);" />
             <br> <br>
     
             <form id="inputFrm" method="post" action="EnterClassWorkGrade">   -->            
            <form class="" method="post" action="enterClassWorkGrades" >
                <div class="list-group">
                    <input type="hidden" name="sectionId" id="sectionId" value="${section.getSectionID()}">
                    <input type="hidden" name="classWorkId" id="classWorkId" value="${classWork.getClassWorkId()}">
                    <input type="hidden" name="maxPoints" id="maxPoints" value="${classWork.getMaxPoints()}" >
                    <button type="submit" class="btn btn-default" data-toggle="button" id ="editModeButton" name="editModeButton" value="Activate Edit Mode"><span class="glyphicon glyphicon-pencil"></span> Edit Mode</button>
                    <button type="submit" class="btn btn-disabled" name="saveGrades" id="saveGrades" disabled="disabled"><span class="glyphicon glyphicon-saved"></span> Save grades</button>
                </div>

                <div class="row">
                    <div class="span5">
                        <table class="table table-striped table-bordered table-condensed">
                            <thead>
                                <tr>
                                    <th class="col-md-3">Student Last Name</th>
                                    <th class="col-md-3">Student First Name</th>
                                    <th class="col-md-1">Points Earned</th>
                                  <!--  <th class="col-md-1">Grade</th> -->
                                    <th class="col-md-4">Comments</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${studentAndGrades}" var="studentAndGrade">                                     
                                    <tr>
                                        <c:choose>
                                            <c:when test="${studentAndGrade.getGrade()== null}">

                                                <td>${studentAndGrade.getStudent().getLastName()}

                                                    <input type="hidden" name="studentId_newGrade" value="${studentAndGrade.getStudent().getUserId()}">
                                                </td>
                                                <td>${studentAndGrade.getStudent().getFirstName()} </td>
                                                <td><input class="form-control" type="text" name="pointsEarned_newGrade" id="pointsEarned_newGrade" disabled="disabled" value="" /></td>
                                                    <!-- <td>
                                                    <select class="form-control" id="letterGrade" name="letterGrade">
                                                     <option value="A+">A+</option><option value="A">A</option><option value="A-">A-</option>
                                                          <option value="B+">B+</option><option value="B">B</option><option value="B-">B-</option>
                                                          <option value="C+">C+</option><option value="C">C</option><option value="C-">C-</option>
                                                          <option value="D+">D+</option><option value="D">D</option><option value="D-">D-</option>
                                                          <option value="F">F</option>
                                                    </select></td> -->


                                                <td><textarea class ="form-control" rows="2" type="text" name="comments_newGrade" id="comments_newGrade"  disabled="disabled"  placeholder="Comments"></textarea></td>                       

                                            </c:when>
                                            <c:otherwise>
                                                <td>${studentAndGrade.getStudent().getLastName()}
                                                    <input type="hidden" name="studentId_editableGrade" value="${studentAndGrade.getStudent().getUserId()}">
                                                </td>
                                                <td>${studentAndGrade.getStudent().getFirstName()} </td>
                                                <td><input class="form-control" type="text" name="pointsEarned_editableGrade" id="pointsEarned_editableGrade" value="${studentAndGrade.getGrade().getPointsEarned()}" disabled="disabled" /></td>
                                               <!--     <td><select class="form-control" id="letterGrade" name="letterGrade_editable"  disabled="disabled">
                                                            <option value="A+">A+</option><option value="A">A</option><option value="A-">A-</option>
                                                                <option value="B+">B+</option><option value="B">B</option><option value="B-">B-</option>
                                                                <option value="C+">C+</option><option value="C">C</option><option value="C-">C-</option>
                                                                <option value="D+">D+</option><option value="D">D</option><option value="D-">D-</option>
                                                                <option value="F">F</option>
                                                    </select></td> -->
                                                <td><textarea class ="form-control" rows="2" type="text" name="comments_editableGrade" id="comments_editableGrade" placeholder="Comments"  disabled="disabled">${studentAndGrade.getGrade().getComments()}</textarea></td>                       

                                        <input type="hidden" name="gradeId_editableGrade" value="${studentAndGrade.getGrade().getGradeId()}" />

                                    </c:otherwise>

                                </c:choose>  
                                </tr>     
                            </c:forEach>
                            </tbody>
                        </table>
                        <!-- leave some spaces between the table and the submit button -->
                        <br>
                    </div>
                </div>

            </form>
        </div> <!-- /container -->
        <script src="../libs/jquery/jquery-2.0.3.min.js"></script>
        <script src="../libs/bootstrap/js/bootstrap.min.js"></script>
        <script src="../scripts/enterClassWorkGrades.js"></script>
        <!-- Placed at the end of the document so the pages load faster -->
    </body  
</html>
